<template>
  <section class="content-view wrapper">
    <div class="local-region">
      <top-tip v-model="show" entry-direction="down" content="顶部消息提示内容"/>
      参考文案
    </div>

    <h-button class="button-class" type="rimless" shadow @click.native="showTopTip">TopTip</h-button>
  </section>
</template>

<script>
import { HButton, TopTip } from 'hippius'

export default {
  components: {
    HButton,
    TopTip,
  },
  data () {
    return {
      show: false,
    }
  },
  methods: {
    showTopTip () {
      if (this.show) return
      this.show = true
    },
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .button-class {
    width: 95%;
    margin: 20px 2.5%;
    font-size: 14px;
    color: cadetblue;
    border-radius: 3px;
  }

  .local-region {
    overflow: hidden;
    position: relative;
    height: 200px;
    background-color: #eee;
  }
}
</style>
